<template>
    <div>
        <el-button size="small" type="primary" @click="openTaxEditUI(null)">添加税率</el-button>

        <el-table :data="incomeUp" border stripe :summary-method="getSummaries" show-summary @header-click="clickFun"
            style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column label="测算收入表">
                <el-table-column prop="type_title" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="area" label="一般计税建筑面积" width="180" :formatter="stateFormat">
                </el-table-column>
                <el-table-column prop="up_ratio" label="比例">
                </el-table-column>
                <el-table-column prop="up_ratio_ybjstucb" label="土地成本抵减增值税收入" :formatter="stateFormat">
                </el-table-column>

                <el-table-column v-for=" (val, key, i) in taxList" :key="key" :formatter="stateFormat"
                    :labelClassName="val.id" :label="val.ratio + '%已售建筑面积'">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 1">{{ val.residence }}</span>
                        <span v-else-if="scope.row.type == 2">{{ val.nresidence }}</span>
                        <span v-else-if="scope.row.type == 3">{{ val.up_storeroom }}</span>
                        <span v-else-if="scope.row.type == 4">{{ val.up_business }}</span>
                        <span v-else-if="scope.row.type == 5">{{ val.up_carport }}</span>
                        <span v-else-if="scope.row.type == 6">{{ val.up_mating }}</span>
                        <span v-else-if="scope.row.type == 7">{{ val.down_storeroom }}</span>
                        <span v-else-if="scope.row.type == 8">{{ val.down_business }}</span>
                        <span v-else-if="scope.row.type == 9">{{ val.down_carport }}</span>
                        <span v-else-if="scope.row.type == 10">{{ val.down_mating }}</span>
                        <span v-else></span>
                    </template>
                </el-table-column>


                <el-table-column v-for=" (val, key, i) in taxList" :key="key" :label="'已售' + val.ratio + '%抵减增值税收入'">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 1">{{ scope.row.up_ratio_ybjstucb / scope.row.area * val.residence
                            }}</span>
                        <span v-else-if="scope.row.type == 2">{{ scope.row.up_ratio_ybjstucb / scope.row.area *
            val.nresidence }}</span>
                        <span v-else-if="scope.row.type == 3">{{ scope.row.up_ratio_ybjstucb / scope.row.area *
            val.up_storeroom }}</span>
                        <span v-else-if="scope.row.type == 4">{{ scope.row.up_ratio_ybjstucb / scope.row.area *
            val.up_business }}</span>
                        <span v-else-if="scope.row.type == 5">{{ scope.row.up_ratio_ybjstucb / scope.row.area *
            val.up_carport }}</span>
                        <span v-else-if="scope.row.type == 6">{{ scope.row.up_ratio_ybjstucb / scope.row.area *
            val.up_mating }}</span>
                        <span v-else-if="scope.row.type == 7">{{ scope.row.up_ratio_ybjstucb / scope.row.area *
            val.down_storeroom }}</span>
                        <span v-else-if="scope.row.type == 8">{{ scope.row.up_ratio_ybjstucb / scope.row.area *
            val.down_business }}</span>
                        <span v-else-if="scope.row.type == 9">{{ scope.row.up_ratio_ybjstucb / scope.row.area *
            val.down_carport }}</span>
                        <span v-else-if="scope.row.type == 10">{{ scope.row.up_ratio_ybjstucb / scope.row.area *
            val.down_mating }}</span>
                        <span v-else></span>
                    </template>
                </el-table-column>

            </el-table-column>
        </el-table>

        <!-- 下半部分 -->
        <el-table border :data="downList" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="title" label="">
                <template slot-scope="scope">
                    <div @click="saveTaxMoney(scope.row)">{{ scope.row.title }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" v-for="(item, index) in downList[0].list" :key="index"
                :label="item.type_title">

                <template slot-scope="scope">
                    {{ scope.row.list[index].income | decimal }}
                </template>
            </el-table-column>
            <el-table-column prop="sum" label="合计">
                <template slot-scope="scope">
                    <div @click="saveTaxMoney(scope.row)">{{ scope.row.sum }}</div>
                </template>
            </el-table-column>

        </el-table>
        <!-- 下半部分结束 -->

        <!-- 添加税率 面积 业态对应已售面积 -->
        <el-dialog @close="clearForm" title="业态对应已售面积" :visible.sync="dialogFormVisible">
            <el-form :model="taxForm" ref="formRef">
                <el-form-item label="税率">
                    <el-input v-model="taxForm.ratio"></el-input>
                </el-form-item>
                <el-form-item label="普通住宅">
                    <el-input v-model="taxForm.residence"></el-input>
                </el-form-item>
                <el-form-item label="非普通住宅">
                    <el-input v-model="taxForm.nresidence"></el-input>
                </el-form-item>
                <el-form-item label="地上储藏间">
                    <el-input v-model="taxForm.up_storeroom"></el-input>
                </el-form-item>
                <el-form-item label="地上商业">
                    <el-input v-model="taxForm.up_business"></el-input>
                </el-form-item>
                <el-form-item label="地上车库/其他">
                    <el-input v-model="taxForm.up_carport"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCalculateTax">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加税率 -->

        <!-- 业态对应已售金额 -->
        <el-dialog @close="clearMoneyForm" title="业态对应已售金额" :visible.sync="dialogMoneyFormVisible">
            <el-form :model="taxMoneyForm" ref="formRef">
                <el-form-item label="普通住宅">
                    <el-input v-model="taxMoneyForm.residence_money"></el-input>
                </el-form-item>
                <el-form-item label="非普通住宅">
                    <el-input v-model="taxMoneyForm.nresidence_money"></el-input>
                </el-form-item>
                <el-form-item label="地上储藏间">
                    <el-input v-model="taxMoneyForm.up_storeroom_money"></el-input>
                </el-form-item>
                <el-form-item label="地上商业">
                    <el-input v-model="taxMoneyForm.up_business_money"></el-input>
                </el-form-item>
                <el-form-item label="地上车库/其他">
                    <el-input v-model="taxMoneyForm.up_carport_money"></el-input>
                </el-form-item>
                <el-form-item label="地下储藏室">
                    <el-input v-model="taxMoneyForm.down_storeroom_money"></el-input>
                </el-form-item>
                <el-form-item label="地下商业">
                    <el-input v-model="taxMoneyForm.down_business_money"></el-input>
                </el-form-item>
                <el-form-item label="地下车库">
                    <el-input v-model="taxMoneyForm.down_carport_money"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCalculateTaxMoney">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 业态对应已售金额 -->


    </div>
</template>

<script>
import calculateApi from '@/api/calculate'

export default {
    data() {
        return {
            dialogFormVisible: false,

            dialogMoneyFormVisible: false,

            taxForm: {},

            calculate_id: '',

            incomeUp: [],

            taxList: [],

            downTitleList: [],

            downList: [],

            taxMoneyForm: [],

        }
    },
    methods: {

        clickFun(column, labelClassName) {
            if (column.label.match(/已售建筑面积$/)) {
                this.openTaxEditUI(column.labelClassName);
            }
        },

        saveTaxMoney(row) {
            if (row.tax_id) {
                this.openTaxMoneyEditUI(row.tax_id);
            }
        },

        clearForm() {
            this.taxForm = {};
            this.$refs.formRef.clearValidate();
        },

        clearMoneyForm() {
            this.taxMoneyForm = {};
            this.$refs.formRef.clearValidate();
        },


        //打开添加/修改税率弹窗
        openTaxEditUI(id) {
            if (id) {
                //根据id获取信息
                calculateApi.getCalculateTaxById(id).then(response => {
                    this.taxForm = response.data.info;
                })
            }
            this.dialogFormVisible = true;
        },

        //提交税率
        saveCalculateTax() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    this.taxForm.calculate_id = this.calculate_id;
                    calculateApi.saveCalculateTax(this.taxForm).then(response => {
                        this.$message({
                            message: response.message,
                            type: 'success'
                        });
                        this.dialogFormVisible = false;

                        this.getCalculateIncome();
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        //打开添加/修改税率弹窗
        openTaxMoneyEditUI(id) {

            if (id) {
                //根据id获取信息
                calculateApi.getCalculateTaxById(id).then(response => {
                    this.taxMoneyForm = response.data.info;
                })
            }
            this.dialogMoneyFormVisible = true;
        },

        //提交金额
        saveCalculateTaxMoney() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    this.taxMoneyForm.calculate_id = this.calculate_id;
                    calculateApi.saveCalculateTaxMoney(this.taxMoneyForm).then(response => {
                        this.$message({
                            message: response.message,
                            type: 'success'
                        });
                        this.dialogMoneyFormVisible = false;

                        this.getCalculateIncome();
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        getCalculateIncome() {
            calculateApi.getCalculateIncome(this.calculate_id).then(response => {
                this.incomeUp = response.data.list;
                this.taxList = response.data.taxList;
                this.downList = response.data.down;
                this.downTitleList = response.data.downTitle;

            })
        },
    },

    created() {
        var query = this.$route.query;
        if (query.id) {
            this.calculate_id = query.id;
        }

        this.getCalculateIncome();
    },

    filters: {
        decimal(value) {
            return value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }
    }
}
</script>

<style></style>